<template>
  <view>
    <u-navbar title="营收统计"></u-navbar>
    <u-gap height="20" bg-color="#f2f2f2"></u-gap>
    <view class="top">
      <view class="top-title">
        <view class="title"> 营收与订单统计 </view>
        <view class="">
          {{ today }}
          <u-icon name="/static/img/rl.png" size="20"></u-icon>
        </view>
      </view>
      <view class="top-date">
        <view
          @click="current = 1"
          class="date-item"
          :style="current == 1 ? `background-color: #0F76BC;color: #fff;` : ``"
        >
          本周
        </view>
        <view
          @click="current = 2"
          class="date-item"
          :style="current == 2 ? `background-color: #0F76BC;color: #fff;` : ``"
        >
          本月
        </view>
        <view
          @click="current = 3"
          class="date-item"
          :style="current == 3 ? `background-color: #0F76BC;color: #fff;` : ``"
        >
          昨日
        </view>
      </view>
      <view class="top-info">
        <view v-if="current == 1" class="info-tip">
          <p class="">总收入</p>
          <view class="info-item"> ¥{{ summery.weekPayPrice * (0.01).toFixed(2) }} </view>
          <!-- p class="info-tip">
						待结算¥66
					</p> -->
        </view>
        <view v-if="current == 1" class="info-tip">
          <p class="">总接订单（单）</p>
          <view class="info-item">
            {{ summery.weekOrderCount }}
          </view>
          <!-- <p class="info-tip">
						待配送3订单
					</p> -->
        </view>

        <view v-if="current == 2" class="info-tip">
          <p class="">总收入</p>
          <view class="info-item"> ¥{{ summery.monthPayPrice * (0.01).toFixed(2) }} </view>
        </view>
        <view v-if="current == 2" class="info-tip">
          <p class="">总接订单（单）</p>
          <view class="info-item">
            {{ summery.monthOrderCount }}
          </view>
        </view>

        <view v-if="current == 3" class="info-tip">
          <p class="">总收入</p>

          <view class="info-item"> ¥{{ summery.yesterdayPayPrice * (0.01).toFixed(2) }} </view>
        </view>
        <view v-if="current == 3" class="info-tip">
          <p class="">总接订单（单）</p>
          <view class="info-item">
            {{ summery.yesterdayOrderCount }}
          </view>
        </view>
      </view>
      <u-gap height="20" bg-color="#f2f2f2"></u-gap>

      <view class="">
        <view class="charts-title">
          <view class="title"> 营收与订单统计 </view>
          <view
            @click="onChange(1)"
            class="con-date"
            :style="current2 == 1 ? `background-color: #0F76BC;color: #fff;` : ``"
          >
            日
          </view>
          <view
            @click="onChange(30)"
            class="con-date"
            :style="current2 == 30 ? `background-color: #0F76BC;color: #fff;` : ``"
          >
            月
          </view>
          <view
            @click="onChange(365)"
            class="con-date"
            :style="current2 == 365 ? `background-color: #0F76BC;color: #fff;` : ``"
          >
            年
          </view>
        </view>

        <view class="charts-box">
          <qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      current2: 1,
      summery: {},
      today: '',
      chartData: {},
      opts: {
        color: [
          '#1890FF',
          '#91CB74',
          '#FAC858',
          '#EE6666',
          '#73C0DE',
          '#3CA272',
          '#FC8452',
          '#9A60B4',
          '#ea7ccc'
        ],
        padding: [15, 15, 0, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: 'dash',
          dashLength: 2
        },
        extra: {
          area: {
            type: 'curve',
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: 'hollow'
          }
        }
      }
    }
  },
  onLoad() {
    this.$u.get('/app-api/statistics/trade/order-summary').then((res) => {
      this.summery = res.data.value
    })
    this.onChange(1)
  },

  methods: {
    onChange(e) {
      this.current2 = e
      let begin, end
      let now = new Date()
      if (e == 1) {
        begin = this.$utils.parseTime(
          new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0)
        )
      } else if (e == 30) {
        begin = this.$utils.parseTime(new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0))

        console.log(begin, end)
      } else if (e == 365) {
        begin = this.$utils.parseTime(new Date(now.getFullYear(), 1, 1, 0, 0, 0))
      }
      end = this.$utils.parseTime(now)
      this.today = end.substring(0, 10)
      this.$u
        .get(
          `/app-api/statistics/trade/order-count-trend?type=${e}&beginTime=${begin}&endTime=${end}`
        )
        .then((res) => {
          let data = {
            categories: [],
            series: [
              {
                name: '销售额',
                data: []
              },
              {
                name: '销售量',
                data: []
              }
            ]
          }

          let year = now.getFullYear()
          res.data.forEach((item) => {
            if (e == 1 || e == 365) {
              data.categories.push(item.value.date)
            } else if (e == 30) {
              data.categories.push(item.value.date.replace(`${year}-`, ''))
            }
            data.series[0].data.push((item.value.orderPayPrice * 0.01).toFixed(2))
            data.series[1].data.push(item.value.orderPayCount)
          })

          this.$nextTick(() => {
            this.chartData = JSON.parse(JSON.stringify(data))
          })
        })
    }
  }
}
</script>

<style>
.top-title {
  display: flex;
  padding: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: 700;
  flex: 1;
}
.top-date {
  display: flex;
  border-top: #e6e6e6 solid 2rpx;
  border-bottom: #e6e6e6 solid 2rpx;
  font-size: 32rpx;
}
.date-item {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}

.top-info {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 50rpx;
  line-height: 55rpx;
}

.info-tip {
  font-size: 24rpx;
  color: #999999;
}
.info-tip view {
  font-size: 32rpx;
  color: black;
}

.charts-title {
  display: flex;
  padding: 20rpx;
  border-bottom: #e6e6e6 solid 2rpx;
}
.charts-date {
  background-color: #0f76bc;
  color: #fff;
}
.con-date {
  padding: 10rpx 20rpx;
  margin: 0 10rpx;
  border-radius: 30rpx;
}
.charts-box {
  width: 100%;
  height: 300px;
}
</style>
